<template>
	<div class="front_common_card">
		<div class="title">
			<h2>{{ title }}</h2>
			<slot name="button"></slot>
		</div>
		<div class="content">
			<slot></slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
interface Prop {
	title: string;
}
const props = defineProps<Prop>();
</script>

<style lang="scss" scoped>
.front_common_card {
	margin-top: 20px;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		h2 {
			font-size: 20px;
			line-height: 1;
		}
		:deep(button.arco-btn-text) {
			padding: 0;
			height: 20px;
			line-height: 1;
		}
	}
	.content {
	}
}
</style>
